<div class="list-container">
    <div *ngFor="let item of list; let i = index;">
        <!-- remove divider -->
        <div class="divider-button-container" *ngIf="item.divider">
            <button class="divider-button divider" (click)="removeDivider(i)" matTooltipPosition="below" matTooltip="remove divider">
                <span class="line"></span>
                <mat-icon class="icon">remove</mat-icon>
                <span class="line"></span>
            </button>
        </div>
        <!-- add divider -->
        <div class="divider-button-container" *ngIf="!item.divider && canAddDivider(i)">
            <button class="divider-button divider-option" (click)="addDivider(i)" matTooltipPosition="below" matTooltip="add a divider">
                <span class="line"></span>
                <mat-icon class="icon">add</mat-icon>
                <span class="line"></span>
            </button>
        </div>

        <!-- list item -->
        <div *ngIf="!item.divider" class="item-container hide-subscript">
            <mat-form-field>
                <mat-label>{{config.nameField}}</mat-label>
                <input
                    matInput
                    matTextareaAutosize
                    [(ngModel)]="item[config.nameField]"
                    (input)="updateList()"/>
            </mat-form-field>
            <mat-form-field>
                <mat-label>{{config.valueField}}</mat-label>
                <input
                    matInput
                    matTextareaAutosize
                    [(ngModel)]="item[config.valueField]"
                    (input)="updateList()"/>
            </mat-form-field>
            <a  *ngIf="includeLinks && item.valid()"
                class="assigned-link"
                href="{{ item[config.valueField] }}"
                target="_blank"
                rel="noopener noreferrer">
                {{ item[config.nameField] }}
            </a>
            <div class="remove-button">
                <button class="button" (click)="remove(i)">remove</button>
            </div>
        </div>
    </div>
</div>
<div class="add-more">
    <button class="button" (click)="add()">add {{ config.type }}</button>
</div>
